<template>
	<view class="publish-container" :style="colorStyle">
		<view class="header bg-color">
			<view class="title">发布大宗商品</view>
		</view>
		
		<view class="form-container">
			<view class="form-item">
				<view class="form-label">标题</view>
				<input class="form-input" 
					v-model="formData.title" 
					placeholder="请输入大宗商品标题" 
					placeholder-class="placeholder" />
			</view>
			
			<view class="form-item">
				<view class="form-label">内容</view>
				<textarea class="form-textarea" 
					v-model="formData.content" 
					placeholder="请输入大宗商品详细内容" 
					placeholder-class="placeholder" />
			</view>
			
			<view class="form-item">
				<view class="form-label">联系电话</view>
				<input class="form-input" 
					v-model="formData.phone" 
					type="number" 
					maxlength="11" 
					placeholder="请输入联系电话" 
					placeholder-class="placeholder" />
			</view>
			
			<view class="form-item">
				<view class="form-label">所在地区</view>
				<picker mode="region" @change="onRegionChange">
					<view class="picker-container">
						<view class="picker-value" :class="{'placeholder': !hasSelectedRegion}">
							{{ hasSelectedRegion ? `${formData.province} ${formData.city} ${formData.area}` : '请选择所在地区' }}
						</view>
						<text class="picker-arrow iconfont icon-jiantou"></text>
					</view>
				</picker>
			</view>
			
			<button class="submit-btn bg-color" @click="submitForm">发布</button>
		</view>
	</view>
</template>

<script>
	import { addCommodity } from '@/api/commodity.js';
	import colors from '@/mixins/color.js';
	
	export default {
		mixins: [colors],
		data() {
			return {
				formData: {
					title: '',
					content: '',
					phone: '',
					province: '',
					city: '',
					area: '',
					city_id: ''
				},
				showRegion: false,
				defaultRegion: ['', '', ''],
				regionData: []
			}
		},
		computed: {
			hasSelectedRegion() {
				return this.formData.province && this.formData.city && this.formData.area;
			}
		},
		methods: {
			// 显示地区选择器
			showRegionPicker() {
				// 直接点击触发picker组件
			},
			
			// 地区选择确认
			onRegionChange(e) {
				const values = e.detail.value;
				const regions = e.detail.value;
				
				// 获取选择的省市区
				this.formData.province = regions[0];
				this.formData.city = regions[1];
				this.formData.area = regions[2];
				this.formData.city_id = ''; // 这里需要根据实际情况获取city_id
				
				// 更新默认值
				this.defaultRegion = regions;
			},
			
			// 表单验证
			validateForm() {
				if (!this.formData.title.trim()) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.content.trim()) {
					uni.showToast({
						title: '请输入内容',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.formData.phone.trim()) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none'
					});
					return false;
				}
				
				if (!/^1[3-9]\d{9}$/.test(this.formData.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return false;
				}
				
				if (!this.hasSelectedRegion) {
					uni.showToast({
						title: '请选择所在地区',
						icon: 'none'
					});
					return false;
				}
				
				return true;
			},
			
			// 提交表单
			submitForm() {
				if (!this.validateForm()) return;
				
				uni.showLoading({
					title: '提交中...'
				});
				
				addCommodity(this.formData)
					.then(res => {
						uni.hideLoading();
						
						if (res.status === 200) {
							uni.showToast({
								title: '发布成功',
								icon: 'success'
							});
							
							// 延迟返回，让用户看到提示
							setTimeout(() => {
								uni.navigateBack();
							}, 1500);
						} else {
							uni.showToast({
								title: res.msg || '发布失败',
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.hideLoading();
						uni.showToast({
							title: '发布失败，请重试',
							icon: 'none'
						});
					});
			}
		}
	}
</script>


<style lang="scss" scoped>
	.publish-container {
		min-height: 100vh;
		background-color: #f5f5f5;
		
		.header {
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 10;
			
			.title {
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
			}
		}
		
		.form-container {
			margin-top: 108rpx;
			padding: 30rpx 20rpx;
		}
		
		.form-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 20rpx 24rpx;
			margin-bottom: 20rpx;
			
			.form-label {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: 16rpx;
			}
			
			.form-input {
				width: 100%;
				height: 80rpx;
				font-size: 28rpx;
				color: #333;
			}
			
			.form-textarea {
				width: 100%;
				height: 240rpx;
				font-size: 28rpx;
				color: #333;
			}
			
			.picker-container {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				
				.picker-value {
					font-size: 28rpx;
					color: #333;
					flex: 1;
				}
				
				.picker-arrow {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
		
		.submit-btn {
			width: 100%;
			height: 88rpx;
			border-radius: 44rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.placeholder {
			color: #999;
		}
	}
</style>